<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;  //阻止vue在启动时生成使用生产版本提示。

    new Vue({
        el: '#root',
        // template:
        // `
        // <div>
        // <h2>当前的n值是：{{n}}</h2>
        // <button @click="add">点我n+1</button>
        // </div>
        // `,
        data: {
            n: 1

        },
        methods: {
            add() {
                console.log('add');
                this.n++
            },
            bye(){
                console.log('bye');
                this.$destroy() 
            }
        },
        watch:{
            n(){
                console.log('n的值变了');
            }
        },
        beforeCreate() { // 这个阶段是指数据监测、数据代理创建之前
            console.log('beforeCreate');
        },
        created() { // 数据监测和数据代理创建完毕
            console.log('created');
            //console.log(this); 出现了_data,以及数据代理
        },
        beforeMount() {
            console.log('beforeMount');
        },
        mounted() {
            console.log('mounted');
        },
        beforeUpdate() {
            console.log('beforeUpdate');
            //console.log(this.n);// 2 数据是新的，但是页面还是旧的。数据和页面尚未保持同步
            //debugger
        },
        updated() {
            console.log('updated');// 数据和页面保持同步
            //console.log(this.n);
            //debugger
        },
        beforeDestroy() {
            console.log('beforeDestroy');
            //console.log(this.n); 被销毁前可以拿到属性的值
            this.add();
        },
        destroyed() {
            console.log('destroyed');
        },
    })

</script>

</html>